import React, { useState } from "react"

import { IMemberPageLabelResponse } from "@/api/member-manage/types"
import DialogGame from "@/components/common/dialogGame"

import { SLabelUseNum } from "./index.styled"

interface LabelUseNumProps {
	record: IMemberPageLabelResponse
}

const LabelUseNum: React.FC<LabelUseNumProps> = ({ record }) => {
	const [isOpenModal, setIsModalOpen] = useState(false)

	return !!record.labelUsedNum || record.labelUsedNum == "0" ? (
		<>
			<SLabelUseNum onClick={() => setIsModalOpen(true)}>{record.labelUsedNum}</SLabelUseNum>
			{isOpenModal && <DialogGame open={isOpenModal} onCancel={() => setIsModalOpen(false)} record={record} />}
		</>
	) : (
		<>-</>
	)
}

export default LabelUseNum
